<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>签名</title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red;" width="800" height="600"></canvas>
		<button id="button">清除画面</button>
		<script type="text/javascript">
			window.onload = function(){
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");
				var canvasx = canvas.getBoundingClientRect().left;
				var canvasy = canvas.getBoundingClientRect().top;
				console.log(canvasx);
				console.log(canvasy);
				canvas.addEventListener('mousedown',downfun);
				canvas.addEventListener('mousemove',movefun);
				canvas.addEventListener('mouseup',upfun);
				var startx;
				var starty;
				var endx;
				var endy;
				var offon = false;
				cxt.lineWidth = 5;
				cxt.lineCap = 'square'
				function downfun(e){
					offon = true;
					startx=e.clientX-canvasx;
					starty=e.clientY-canvasy;
				}
				function movefun(e){
					if(offon == true){
					cxt.beginPath()
					endx=e.clientX-canvasx;
					endy=e.clientY-canvasy;
					cxt.moveTo(startx,starty);
					cxt.lineTo(endx,endy);
					cxt.strokeStyle = 'cornflowerblue'
					cxt.stroke();
					
					startx=endx;
					starty=endy;
					}
				}
				function upfun(){
					offon = false;
					cxt.closePath();
				}
				document.getElementById("button").onclick = function(){
					cxt.clearRect(0,0,canvas.width,canvas.height);
				}
			}
		</script>
	</body>
</html>
